<template>
	<view class="page">
		<view class="banner">
			<u-swiper :list="bannerlist" @change="change" @click="click" radius="15" indicator="true" height="307rpx">
			</u-swiper>
		</view>
		<view class="items" v-if="isRegister">
			<!-- <view class="items_left" @click="scanCodeEvent">
				<view class="items_top">
					<img src="@/static/ke_hu/bian.png" alt="" style="width: 100%;height: 100%;">
				</view>
				<view class="items_but">
					申请分期
				</view>
			</view>
			<view class="items_center">
			</view> -->
			<view class="items_rght" @click="goShenQing">
				<u-button
					:customStyle="{border:'none',background: '#DAEAFC',width:'108rpx',color:'#fff',height:'108rpx',padding:'0rpx',fontSize:'30rpx',borderRadius:'15rpx'}">
					<img src="@/static/ke_hu/bian2.png" alt="" style="width: 100%;height: 100%;">
				</u-button>
				<view class="items_but">
					我的申请
				</view>
			</view>
		</view>
		<view class="items" v-else>
			<!-- <view class="items_left">
				<u-button
					:customStyle="{border:'none',background: '#DAEAFC',width:'108rpx',color:'#fff',height:'108rpx',padding:'0rpx',fontSize:'30rpx',borderRadius:'15rpx'}"
					:hairline="hairline" lang="zh_CN" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">
					<img src="@/static/ke_hu/bian.png" alt="" style="width: 100%;height: 100%;">
				</u-button>
				<view class="items_but">
					申请分期
				</view>
			</view>

			<view class="items_center">
			</view> -->
			<view class="items_rght">
				<u-button
					:customStyle="{border:'none',background: '#DAEAFC',width:'108rpx',color:'#fff',height:'108rpx',padding:'0rpx',fontSize:'30rpx',borderRadius:'15rpx'}"
					:hairline="hairline" lang="zh_CN" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">
					<img src="@/static/ke_hu/bian2.png" alt="" style="width: 100%;height: 100%;">
				</u-button>
				<view class="items_but">
					我的申请
				</view>
			</view>
		</view>

		<view class="footer">
			<view class="footer_title">
				<view class="footer_navitems" v-for="items,index in ProductsData" :key="items.id"
					@click="selectNaviTems(index)" :class="[ProductIndex == index ? 'ProductStyle' : '']">
					{{items.name}}
				</view>
				<!-- <u-tabs :list="list1" @click="click" lineWidth="60" :activeStyle="{color: '#0079FE',transform: 'scale(1.05)'}" lineColor="#0079FE" itemStyle="height: 95rpx;padding:0;margin-right:50rpx "></u-tabs> -->
			</view>
			<!-- <view class="jie_shao">
				尊享汇
			</view> -->
			<view class="contnet" v-html="ProductsData[ProductIndex].description">

			</view>
		</view>
	</view>
</template>

<script>
	import registerOrLogin from '@/utils/mixin/registerOrLogin.js' //引入注册登录混入
	export default {
		mixins: [registerOrLogin], // 使用混入
		data() {
			return {
				phoneCode: '',
				isRegister: false, //判断有没有注册
				bannerlist: [],
				ProductsData: [], //产品介绍
				ProductIndex: 0,
			}
		},
		created() {
			this.login()
			this.load()
		},
		methods: {
			load() {
				this.getProducts();
				this.getBannerList()
			},
			loginSuccess(res) {
				this.isRegister = true
				this.phoneNumber = res.data.data.userInfo.account;
				this.avatar = res.data.data.userInfo.avatar;
				this.$parent.shouIndex(res.data.data.roles)
			},
			// // 登录请求接口
			// async login(code) {
			// 	uni.showLoading({
			// 		mask: true
			// 	})
			// 	const res = await this.$get(`/auth/wxChat/login`, {
			// 		code: code
			// 	})
			// 	if (res.status) {
			// 		if (res.data.data.login !== true) {
			// 			return
			// 		}
			// 		this.isRegister = true
			// 		uni.setStorageSync('isRegister', true)
			// 		uni.setStorageSync('account', res.data.data.userInfo.account)
			// 		uni.setStorageSync('token', res.data.data.token)
			// 		uni.setStorageSync('clientUserId', res.data.data.userInfo.id)
			// 		uni.setStorageSync('avatar', res.data.data.userInfo.avatar)
			// 		uni.setStorageSync('roles', res.data.data.roles)
			// 		uni.setStorageSync('userInfo', JSON.stringify(res.data.data.userInfo))
			// 		this.phoneNumber = res.data.data.userInfo.account;
			// 		this.avatar = res.data.data.userInfo.avatar;
			// 		this.$parent.shouIndex(res.data.data.roles)
			// 		// this.$ToastOk('登录成功')
			// 		return
			// 	}
			// },
			// 获取产品
			async getProducts() {
				const res = await this.$get(`/biz/wx/getProducts`, {})
				if (res.status) {
					this.ProductsData = res.data.data
				}
			},
			// 获取轮播图
			async getBannerList() {
				const res = await this.$get(`/biz/ClientPersonal/getCarousel`, {

				})
				if (res.status) {
					res.data.data.forEach(Element => {
						this.bannerlist.push(Element.img)
					})
				}
				console.log(this.bannerlist, 'Element');
			},
			selectNaviTems(index) {
				this.ProductIndex = index;
			},
			// 去往申请页面
			goShenQing() {
				uni.navigateTo({
					url: '/pages/ke_hu_duan/wo_de_shen_qing/wo_de_shen_qing'
				})
			},
			//去往申请分期页面
			goFenQi() {
				/* uni.navigateTo({
					url:'/pages/ke_hu_duan/wo_de_shen_qing/shen_qing_fen_qi'
				}) */
			},
			/** 扫码事件**/
			scanCodeEvent: function() {
				var that = this;
				wx.scanCode({
					onlyFromCamera: false, // 只允许从相机扫码
					success(res) {
						uni.showLoading({
							mask: true
						})
						console.log("扫码成功：" + JSON.stringify(res))
						var postdata = {
							id: res.path.match(/scene=(\d+)/)[1]
						}
						uni.navigateTo({
							url: "/" + res.path
						})
					},
					fail(err) {
						that.setData({
							scanCode: '',
							c: 0,
							cc: 0,
							ccc: 0,
							t: 0
						})
					}
				})
			},
			change() {

			},
			async isHasInstallment(){
				const res = await this.$get(`/biz/wxInstallment/isHasInstallment`, {})
				if(res.data.data == true){
					uni.showModal({
						title: '提示',
						content: '存在未完成订单',
						showCancel: false,
						confirmText: "确认",
						confirmColor: '#EF111B',
						success: function() {
							uni.navigateTo({
								url: '/pages/ke_hu_duan/wo_de_shen_qing/wo_de_shen_qing'
							})
						}
					})
				}else{
					
				}
			}
		}
	}
</script>

<style>
	.page {
		overflow-y: auto;
		width: 100%;
		height: 100vh;
		/* background-color: #fbfbfb; */

		background-color: #fff;
	}

	.banner {
		width: 690rpx;
		/* height: 307rpx; */
		margin: 22rpx auto 0;
		/* background-color: aqua; */
	}

	.items {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690rpx;
		height: 244rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 48rpx 1rpx rgba(0, 0, 0, 0.04);
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		margin: 81rpx auto 0;
	}

	.items_left,
	.items_rght {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		width: 108rpx;
		height: 177rpx;
	}

	.items_center {
		width: 0rpx;
		height: 122rpx;
		opacity: 1;
		border: 1rpx solid #D8D8D8;
		margin: 0 127rpx 35rpx 127rpx;
	}

	.items_top {
		width: 108rpx;
		height: 108rpx;
		background: #DAEAFC;
		border-radius: 15rpx 15rpx 15rpx 15rpx;
	}

	.items_but {
		font-size: 24rpx;
		font-family: "PingFang SC-Regular, PingFang SC";
		font-weight: 400;
		color: #1A1824;
		margin-top: 26rpx;
	}

	.footer {
		width: 690rpx;
		/* background-color: aquamarine; */
		margin: 40rpx auto;
	}

	.footer_title {
		box-sizing: border-box;
		overflow-x: auto;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		height: 90rpx;
		border-bottom: 1rpx solid #E9E9F0;
	}

	.jie_shao {
		/* height: 42rpx; */
		font-size: 30rpx;
		font-family: "PingFang SC-Bold, PingFang SC";
		font-weight: bold;
		color: #000000;
		margin: 25rpx 0 19rpx 0;
	}

	.contnet {
		font-size: 24rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #9E9E9E;
		padding-bottom: 60rpx;
		margin-top: 32rpx;

	}

	p {
		margin-bottom: 10px;
	}

	.footer_navitems {
		text-align: center;
		height: 82rpx;
		line-height: 80rpx;
		margin-right: 50rpx;
		font-size: 27rpx;
		font-family: "PingFang SC-Bold, PingFang SC";
		font-weight: bold;
		margin-bottom: -4;
	}

	.ProductStyle {
		color: #0079FE;
		border-bottom: 4rpx solid #0079FE;
	}
</style>